<template>
  <div class="counselor-page-root">
    <router-link class="back-btn" to="/counselor">← 返回辅导员端导航</router-link>
    <div class="main-card">
      <h2>假期报备</h2>
      <div class="btn-group">
        <button class="btn main" @click="createReport">新建报备</button>
        <button class="btn secondary">导出报表</button>
      </div>
      <div class="report-list">
        <div class="report-item" v-for="item in pagedReports" :key="item.id">
          <div class="report-title">{{ item.title }}</div>
          <div class="report-meta">{{ item.date }} | {{ item.class }}</div>
          <div class="report-status">状态：<span :class="['status', item.status]">{{ item.status }}</span></div>
          <div class="report-actions">
            <button class="btn mini" @click="viewDetail(item)">查看详情</button>
            <button class="btn mini edit" @click="editReport(item)">编辑</button>
            <button class="btn mini delete" @click="confirmDelete(item)">删除</button>
          </div>
        </div>
      </div>
      <div class="pagination">
        <button class="btn mini" :disabled="page===1" @click="page--">上一页</button>
        <button class="btn mini active">{{ page }}</button>
        <button class="btn mini" :disabled="page===totalPages" @click="page++">下一页</button>
      </div>
    </div>
    <!-- 详情弹窗 -->
    <div v-if="showDetail" class="modal-mask">
      <div class="modal-box">
        <h4>{{ detailItem.title }} - 详情</h4>
        <div class="detail-row"><b>班级：</b>{{ detailItem.class }}</div>
        <div class="detail-row"><b>报备时间：</b>{{ detailItem.date }}</div>
        <div class="detail-row"><b>状态：</b><span :class="['status', detailItem.status]">{{ detailItem.status }}</span></div>
        <div class="detail-row"><b>报备人数：</b>{{ detailItem.count }} 人</div>
        <div class="detail-row"><b>备注：</b>{{ detailItem.remark }}</div>
        <div style="text-align:right; margin-top:18px;">
          <button class="btn mini" @click="showDetail=false">关闭</button>
        </div>
      </div>
    </div>
    <!-- 编辑弹窗 -->
    <div v-if="showEdit" class="modal-mask">
      <div class="modal-box">
        <h4>编辑报备</h4>
        <div class="form-group">
          <label>标题</label>
          <input v-model="editForm.title" />
        </div>
        <div class="form-group">
          <label>班级</label>
          <input v-model="editForm.class" />
        </div>
        <div class="form-group">
          <label>报备时间</label>
          <input v-model="editForm.date" type="date" />
        </div>
        <div class="form-group">
          <label>状态</label>
          <select v-model="editForm.status">
            <option>已完成</option>
            <option>未完成</option>
          </select>
        </div>
        <div class="form-group">
          <label>报备人数</label>
          <input v-model.number="editForm.count" type="number" min="0" />
        </div>
        <div class="form-group">
          <label>备注</label>
          <input v-model="editForm.remark" />
        </div>
        <div style="text-align:right; margin-top:18px;">
          <button class="btn mini" @click="showEdit=false">取消</button>
          <button class="btn mini main" @click="saveEdit">保存</button>
        </div>
      </div>
    </div>
    <!-- 删除确认弹窗 -->
    <div v-if="showDelete" class="modal-mask">
      <div class="modal-box">
        <h4>确认删除</h4>
        <div class="detail-row">确定要删除"{{ deleteItem.title }}"吗？</div>
        <div style="text-align:right; margin-top:18px;">
          <button class="btn mini" @click="showDelete=false">取消</button>
          <button class="btn mini delete" @click="doDelete">删除</button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'CounselorHolidayReport',
  data() {
    return {
      reports: [
        { id: 1, title: '2024年暑假去向报备', date: '2024-06-20', class: '高一(1)班', status: '已完成', count: 45, remark: '全部学生已报备' },
        { id: 2, title: '2024年寒假去向报备', date: '2024-01-10', class: '高一(2)班', status: '未完成', count: 38, remark: '部分学生未提交' },
        { id: 3, title: '2023年国庆假期报备', date: '2023-09-25', class: '高二(1)班', status: '已完成', count: 42, remark: '报备情况良好' },
        { id: 4, title: '2023年五一假期报备', date: '2023-04-28', class: '高一(1)班', status: '已完成', count: 44, remark: '全部按时完成' },
        { id: 5, title: '2023年清明假期报备', date: '2023-04-01', class: '高一(2)班', status: '已完成', count: 39, remark: '无异常' }
      ],
      showDetail: false,
      detailItem: {},
      showEdit: false,
      editForm: {},
      showDelete: false,
      deleteItem: {},
      page: 1,
      pageSize: 3
    }
  },
  computed: {
    totalPages() {
      return Math.ceil(this.reports.length / this.pageSize);
    },
    pagedReports() {
      const start = (this.page - 1) * this.pageSize;
      return this.reports.slice(start, start + this.pageSize);
    }
  },
  methods: {
    viewDetail(item) {
      this.detailItem = item;
      this.showDetail = true;
    },
    editReport(item) {
      this.editForm = { ...item };
      this.showEdit = true;
    },
    createReport() {
      this.editForm = {
        id: null,
        title: '',
        class: '',
        date: '',
        status: '已完成',
        count: 0,
        remark: ''
      };
      this.showEdit = true;
    },
    saveEdit() {
      if (!this.editForm.title || !this.editForm.class || !this.editForm.date) {
        alert('请填写完整信息！');
        return;
      }
      if (this.editForm.id) {
        const idx = this.reports.findIndex(r => r.id === this.editForm.id);
        if (idx !== -1) this.reports.splice(idx, 1, { ...this.editForm });
      } else {
        // 新建报备，自动生成 id
        const maxId = this.reports.reduce((max, r) => Math.max(max, r.id), 0);
        this.reports.unshift({ ...this.editForm, id: maxId + 1 });
      }
      this.showEdit = false;
    },
    confirmDelete(item) {
      this.deleteItem = item;
      this.showDelete = true;
    },
    doDelete() {
      this.reports = this.reports.filter(r => r.id !== this.deleteItem.id);
      this.showDelete = false;
      // 若删除后页码超出范围，自动回到最后一页
      if (this.page > this.totalPages) this.page = this.totalPages || 1;
    }
  }
}
</script>
<style scoped>
.counselor-page-root { min-height: 100vh; background: #f6f8fa; padding: 32px 0 60px 0; }
.main-card { max-width: 600px; margin: 36px auto; background: #fff; border-radius: 16px; box-shadow: 0 4px 24px rgba(102,126,234,0.10); padding: 36px 32px 28px 32px; }
h2 { text-align: center; margin-bottom: 28px; color: #4a4a4a; }
.btn-group { display: flex; gap: 18px; margin-bottom: 24px; justify-content: center; }
.btn { padding: 10px 28px; border: none; border-radius: 22px; font-size: 15px; font-weight: 500; cursor: pointer; transition: background 0.2s, box-shadow 0.2s; }
.btn.main { background: linear-gradient(90deg, #667eea 0%, #764ba2 100%); color: #fff; box-shadow: 0 2px 8px rgba(102,126,234,0.10); }
.btn.main:hover { background: linear-gradient(90deg, #5a67d8 0%, #6b46c1 100%); }
.btn.secondary { background: #f0f1f5; color: #666; }
.btn.secondary:hover { background: #e0e7ef; }
.btn.mini { background: #007bff; color: #fff; padding: 6px 18px; font-size: 14px; margin-top: 10px; border-radius: 16px; margin-right: 8px; }
.btn.mini.edit { background: #28a745; }
.btn.mini.delete { background: #dc3545; }
.btn.mini.active { background: #764ba2; }
.btn.mini:hover { opacity: 0.85; }
.report-list { margin-top: 18px; }
.report-item { background: #f8f9fa; border-radius: 10px; padding: 18px 20px; margin-bottom: 18px; box-shadow: 0 2px 8px rgba(102,126,234,0.06); }
.report-title { font-weight: 500; font-size: 16px; color: #333; }
.report-meta { font-size: 13px; color: #888; margin: 6px 0; }
.report-status { font-size: 14px; color: #666; margin-bottom: 6px; }
.status { font-weight: bold; }
.status.已完成 { color: #28a745; }
.status.未完成 { color: #dc3545; }
.report-actions { margin-top: 10px; }
.pagination { margin-top: 18px; text-align: center; }
.back-btn { display: inline-block; margin: 24px 0 18px 0; padding: 8px 22px; background: linear-gradient(90deg, #667eea 0%, #764ba2 100%); color: #fff; border-radius: 22px; font-size: 15px; font-weight: 500; text-decoration: none; box-shadow: 0 2px 8px rgba(102,126,234,0.10); transition: background 0.2s, box-shadow 0.2s; }
.back-btn:hover { background: linear-gradient(90deg, #5a67d8 0%, #6b46c1 100%); box-shadow: 0 6px 18px rgba(102,126,234,0.18); }
.modal-mask { position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.2); z-index: 1000; display: flex; align-items: center; justify-content: center; }
.modal-box { background: #fff; border-radius: 10px; padding: 30px 24px; min-width: 320px; box-shadow: 0 8px 32px rgba(0,0,0,0.15); }
.detail-row { margin-bottom: 10px; color: #444; }
.form-group { margin-bottom: 14px; }
.form-group label { display: block; margin-bottom: 6px; color: #333; }
.form-group input, .form-group select { width: 100%; padding: 8px 12px; border: 1px solid #ddd; border-radius: 6px; }
</style> 